<template>
  <div class="modal-content">
    <div class="modal-body">
      <div class="modal-top">
        <div class="modal-text">代码</div>
        <div class="modal-code">
          <span class="label">提交总行数</span>
          <span class="code">{{ addThousandsSeparator(data?.dmtjzs) }}</span>
        </div>
      </div>
      <div class="modal-bottom">
        <div class="modal-code-box">
          <div class="modal-code">
            <span class="label">上一天提交总行数</span>
            <span class="code">{{
              addThousandsSeparator(data?.sytdmtjzs)
            }}</span>
          </div>
          <div class="modal-code">
            <span class="label">本周提交总行数</span>
            <span class="code">{{
              addThousandsSeparator(data?.bzdmtjzs)
            }}</span>
          </div>
          <div class="modal-code">
            <span class="label">本月提交总行数</span>
            <span class="code">{{
              addThousandsSeparator(data?.bydmtjzs)
            }}</span>
          </div>
        </div>
        <div class="modal-code-box">
          <div class="modal-code">
            <span class="label">上一天提交总次数</span>
            <span class="code">{{
              addThousandsSeparator(data?.sytdmtjcs)
            }}</span>
          </div>
          <div class="modal-code">
            <span class="label">本周提交总次数</span>
            <span class="code">{{
              addThousandsSeparator(data?.bzdmtjcs)
            }}</span>
          </div>
          <div class="modal-code">
            <span class="label">本月提交总次数</span>
            <span class="code">{{
              addThousandsSeparator(data?.bydmtjcs)
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  data: { type: Object, default: {} },
});
</script>

<style scoped lang="less">
.modal-content {
  width: 100%;
  height: 2.1rem;
  // padding: 0.12rem;
  // background: #1470cc1a;
  border: 1px solid #e6ebf5;
  border-radius: 0.05rem;
  .modal-body {
    .modal-top {
      background: #f2f7ff;
      padding: 0.12rem;
    }
    .modal-bottom{
      padding:0 0.12rem;
    }
    .modal-text {
      color: #151a24;
    }
    .modal-code {
      margin-right: 0.4rem;
      font-size: 0.14rem;
      display: flex;
      flex-direction: column;
      margin-top: 0.16rem;
      .label {
        color: #4e5969;
      }
      .code {
        color: #1d2129;
        margin-top: 0.04rem;
      }
    }
    .modal-code:nth-child(3){
      margin-right: 0.2rem;
    }
    .modal-code-box {
      display: flex;
      // justify-content: space-between;
    }
  }
}
</style>
